<template>
<div class="add_star_bt my_div_radius" @click="onAdd">
   Star
</div>
</template>

<script>
//添加star按钮
export default {
    name: 'AddStarBt',
    props:{
        title:{ 
            type:String,
            default:"",
        },
        id:{ 
            type:String,
            default:"",
        },
    },
    created(){
        if (process.client) {
            let star_state = localStorage.getItem("star_state");
            if(!star_state){
                localStorage.setItem("star_state", JSON.stringify([]));
            }
        }
    },
    methods:{
        addStarById(id){
            this.$axios.$Api.addStarById({
                id:id,
            }).then(data=>{
                this.blog = data;
            }).catch(()=>{
                return ;
            });
        },
        onAdd(){
            let star_state = localStorage.getItem("star_state");
            star_state = JSON.parse(star_state);
            if(star_state.indexOf(this.title) == -1){ //表示该博客未被被点赞
                star_state.push(this.title);
                localStorage.setItem("star_state", JSON.stringify(star_state));
                this.addStarById(this.id);
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.add_star_bt{
    color: #0bbd87;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    line-height: 1;
    cursor: pointer;
    border: 1px solid #0bbd87;
    font-size: 1.2rem;
    padding: 0.6rem 0.8rem;
    font-weight: bold;
    transition: all 0.2s;
    &:hover{
        background-color: #f5fcff;
    }
    i{
        font-weight: bold;
    }
}
</style>

